import * as React from 'react'
import { Outlet, createRootRoute } from '@tanstack/react-router'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { client, trpc } from '../trpc'

const { useState } = React
export const Route = createRootRoute({
  component: function App() {
    const [queryClient] = useState(() => new QueryClient())
    const [trpcClient] = useState(client)
    return (
    // Setup trpc's react query integration.
    // https://trpc.io/docs/v10/client/react/setup#4-add-trpc-providers
      <trpc.Provider client={trpcClient} queryClient={queryClient}>
        <QueryClientProvider client={queryClient}>
          <Outlet />
        </QueryClientProvider>
      </trpc.Provider>
    )
  },
})
